@import '../styles/themes/default.less';

.MMSwitch {
    position     : relative;
    width        : 50px;
    height       : 30px;
    border-radius: 15px;
    background   : @gray3;

    &::before {
        display      : block;
        content      : " ";
        position     : absolute;
        left         : 1px;
        top          : 1px;
        width        : 48px;
        height       : 28px;
        border-radius: 14px;
        background   : #fff;
        transition   : all .2s;
        box-sizing   : border-box;
        z-index      : 1;
        transform    : scale(1);
    }

    &::after {
        display      : block;
        content      : " ";
        position     : absolute;
        left         : 1px;
        top          : 1px;
        width        : 28px;
        height       : 28px;
        border-radius: 14px;
        background   : #fff;
        transition   : all .2s;
        box-shadow   : 2px 2px 4px rgba(0, 0, 0, .2);
        z-index      : 2;
    }

}


.MMSwitch__disabled {
    opacity: .3;
}

.MMSwitch__checked {
    background: @switchColor;

    &::before {
        transform: scale(0);
    }

    &::after {
        left: 50px - 1 - 28;
    }
}
